<template>
  <qf-card
    className="cate"
    title="商品分类"
    btnTitle="创建"
    btnUrl="/cate/create"
  >
    <!-- 表格 -->
    <qf-table :tableData="tableData" :columns="columns"></qf-table>
    <!-- 表格 -->

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    <!-- 分页 -->
  </qf-card>
</template>

<script>
import tableData from "~mock/cates/index";
console.log("mock数据：", tableData);
console.log("mock数据：", tableData);
console.log("mock数据：", tableData);
console.log("mock数据：", tableData);
console.log("mock数据：", tableData);

export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      tableData: tableData,

      columns: [
        { title: "编号", field: "cat_id" },
        { title: "分类名称", field: "name" },
        {
          title: "级别",
          field: "level",
          render: (row) => {
            return ["一级", "二级", "三级"][row.level - 1];
          },
        },
      ],
      // ...
    };
  },
};
</script>
